<template>
  <div class="container">
    <div class="block">
      <div class="block__header">
        <div class="header__label">{{ toChinesNum(level) }}级选项</div>
        <el-dropdown @command="handleCommand">
          <div class="header__action"><i class="el-icon-more"></i></div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="copy">复制此组</el-dropdown-item>
            <el-dropdown-item style="color: #ff0000" command="del"
              >删除</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <template v-if="list && list.length">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="block__line"
          :class="{ active: index === activeIndex }"
          @click="activeIndex = index"
        >
          <div v-if="isEdit && index === activeIndex">
            <el-input v-model="activeData.label" @blur="labelChange(item)">
            </el-input>
          </div>
          <div v-else>
            <i
              class="el-icon-remove-outline mr-8 u-poiner"
              @click.stop="del(index)"
            ></i
            >{{ item.label }}
          </div>

          <div class="action" v-if="index === activeIndex && !isEdit">
            <el-button type="text" @click="edit">编辑</el-button>
            <!-- <el-button type="text" @click="del">删除</el-button> -->
          </div>
        </div>
        <div class="block__line">
          <div>
            <i
              class="el-icon-circle-plus-outline mr-8 u-poiner c-link"
              @click="add"
            ></i>
            <el-button type="text" @click="add">添加选项</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="noData">
          <div>此选项下无子级选项</div>
          <el-button type="text" @click="addChildren">点击增加一级</el-button>
        </div>
      </template>
    </div>
    <template v-if="activeData.children&&level < 3">
      <ModelBlock
        :list="activeData.children || []"
        :level="level + 1"
        class="block"
        ref="block"
      ></ModelBlock>
    </template>
  </div>
</template>

<script>
import { deepClone } from "@/utils/index";
export default {
  name: "ModelBlock",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    level: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    list(v) {
      if (v) {
        this.activeIndex = 0;
      }
    },
  },
  data() {
    return {
      activeIndex: 0,
      isEdit: false,
    };
  },
  computed: {
    activeData() {
      return this.list[this.activeIndex] || {};
    },
  },
  methods: {
    async add() {
      const newData = {
        label: "选项" + (this.list.length + 1),
        children: [],
      };
      this.list.push(newData);
      this.validName(newData);
      await this.$nextTick();
      this.activeIndex = this.list.length - 1;
    },
    addChildren() {
      if (!this.list.length) {
        this.list.push({ label: "选项1", children: [] });
      } else {
      if(this.level>2){
        this.$message.error('最大为三级选项')
        return
      }
        this.$refs.block.addChildren();
      }
    },
    edit() {
      this.isEdit = true;
    },
    del(index = this.activeIndex) {
      this.list.splice(index, 1);
    },
    validName(data) {
      if (this.list.filter((item) => item.label === data.label).length > 1) {
        data.label += "1";
        this.validName(data);
      }
    },
    labelChange(item) {
      if (!item.label) {
        item.label = "选项" + (this.activeIndex + 1);
      }
      item.label =item.label.replace(new RegExp(",", "g"), "")
      this.isEdit = false;
      this.validName(item);
    },
    async handleCommand(command) {
      if (!this.list.length) {
        this.$message.error("请先在此级下添加一个选项");
        return false;
      }
      if (command === "del") {
        this.del();
      } else if (command === "copy") {
        const data = deepClone(this.activeData);
        data.label += "(复制)";
        this.list.push(data);
        this.validName(data);
        await this.$nextTick();
        this.activeIndex = this.list.length - 1;
      }
    },
    /**
     * 数字转成汉字
     * @params num === 要转换的数字
     * @return 汉字
     * */
    toChinesNum(num) {
      let changeNum = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      let unit = ["", "十", "百", "千", "万"];
      num = parseInt(num);
      let getWan = (temp) => {
        let strArr = temp.toString().split("").reverse();
        let newNum = "";
        let newArr = [];
        strArr.forEach((item, index) => {
          newArr.unshift(
            item === "0" ? changeNum[item] : changeNum[item] + unit[index]
          );
        });
        let numArr = [];
        newArr.forEach((m, n) => {
          if (m !== "零") numArr.push(n);
        });
        if (newArr.length > 1) {
          newArr.forEach((m, n) => {
            if (newArr[newArr.length - 1] === "零") {
              if (n <= numArr[numArr.length - 1]) {
                newNum += m;
              }
            } else {
              newNum += m;
            }
          });
        } else {
          newNum = newArr[0];
        }

        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) {
        noWan = "0" + noWan;
      }
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  color: #777575;
  &:first-child {
    overflow-x: auto;
  }
}
.block:not(.container) {
  width: 205px;
  min-width: 205px;
  height: 360px;
  overflow-y: auto;
  border: 1px solid #dcd0d0;
}
.block + .block {
  margin-left: 70px;
}
.block {
  &__header {
    display: flex;
    height: 60px;
    font-size: 18px;
    align-items: center;
    padding: 0 10px;
    .header {
      &__label {
        font-weight: bold;
        color: #2d2d2d;
      }
      &__action {
        color: #bec0c5;
        margin-left: 15px;
      }
    }
  }
  &__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    font-size: 16px;
    padding: 0 10px;
    &.active {
      color: #333333;
      font-weight: bold;
      background: #ecf2fe;
    }
  }
}
.noData {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100% - 60px);
}

.action {
  display: flex;
  align-items: center;
}
.mr-8 {
  margin-right: 8px;
}
.u-poiner {
  cursor: pointer;
}
.c-link {
  color: #66b1ff;
}
</style>
